<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24" class="top">
        <el-form :model="searchParams" ref="searchParams" :inline="true">
          <el-form-item label="用户名">
            <el-input class="input" v-model="searchParams.username" maxlength='20' placeholder="请输入" clearable
              show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="用户ID">
            <el-input class="input" v-model="searchParams.code" maxlength='20' placeholder="请输入" clearable
              show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input class="input" v-model="searchParams.phone" maxlength='20' placeholder="请输入" clearable
              show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="昵称">
            <el-input class="input" v-model="searchParams.nickname" maxlength='20' placeholder="请输入" clearable
              show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="上级ID" prop="parent__code">
            <el-input v-model="searchParams.parent__code" maxlength='11' placeholder="请输入" clearable></el-input>
          </el-form-item>
          <el-form-item label="身份：" prop="rank">
            <el-select v-model="searchParams.rank" placeholder="请选择" clearable>
              <el-option v-for="item in formData.options.rank" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="团队级别：" prop="team">
            <el-select v-model="searchParams.team" placeholder="请选择" clearable>
              <el-option v-for="item in formData.options.team" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="股东身份：" prop="identity">
            <el-select v-model="searchParams.identity" placeholder="请选择" clearable>
              <el-option v-for="item in formData.options.identity" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="handleSearch" type="primary" icon="el-icon-search"
              style="margin-left:40px">搜索</el-button>
          </el-form-item>
        </el-form>
        <el-form :model="searchParams" ref="searchParams" :inline="true" style="margin:10px 0">
          <!-- <el-button @click="operateAction('create', {})" type="primary" plain size='small'>新增</el-button> -->
          <el-button v-if="passRole(['admin', 'test'])" @click="operateAction('delete', {})" type="info" plain size='small'>删除</el-button>
        </el-form>
        <el-table :data="dataList" size='medium' ref="multipleTable" @selection-change="handleSelectionChange" border>
          <el-table-column type="selection" width="55"></el-table-column>
          <!-- <el-table-column prop="username" label="用户名" show-overflow-tooltip></el-table-column> -->
          <el-table-column prop="code" label="用户ID" show-overflow-tooltip width='80'></el-table-column>
          <el-table-column prop="phone" label="手机号" show-overflow-tooltip width='120'></el-table-column>
          <el-table-column prop="nickname" label="昵称" show-overflow-tooltip width='120'></el-table-column>
          <el-table-column prop="roleModel.name" label="角色" show-overflow-tooltip width='60'></el-table-column>
          <el-table-column prop="rankModel.name" label="身份" show-overflow-tooltip width='80'></el-table-column>
          <el-table-column prop="teamModel.name" label="团队级别" show-overflow-tooltip width='80'></el-table-column>
          <el-table-column prop="identityModel.name" label="股东身份" show-overflow-tooltip width='80'></el-table-column>
          <el-table-column prop="parentModel.code" label="推荐人ID" show-overflow-tooltip width='80'></el-table-column>
          <el-table-column prop="incomes" label="钱包" show-overflow-tooltip width='200'>
            <template slot-scope="{ row, index }">
                <div>消费积分：{{row.incomes}}</div>
                <div>锁定积分：{{row.incomesLocked}}</div>
                <div>贡献值：{{row.contributionValue}}</div>
                <div>抵扣积分：{{row.incomesCredit}}</div>
                <div>原积分：{{row.incomesOriginal}}</div>
              </template>
          </el-table-column>
          <el-table-column prop="incomes" label="业绩" show-overflow-tooltip width="200">
            <template slot-scope="{ row, index }">
              <div>个人消费额：{{row.selfPerformance}}</div>
              <div>直推业绩：{{row.verticalPerformance}}</div>
              <div>团队业绩：{{row.teamPerformance}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="200">
            <template slot-scope="{row, index}">
              {{ formatTime.dateFormat('YY-MM-DD hh:mm:ss', row.createTime) }}
            </template>
          </el-table-column>
          <el-table-column prop="redact" label="操作" fixed="right" min-width="200">
            <template slot-scope="{ row, index }">
              <!-- <el-button type="text" @click="operateAction('addIncomes', row)" size='medium'>积分充值</el-button> -->
              <el-button type="text" @click="operateAction('update', row)" size='medium'>修改</el-button>
              <el-button type="text" @click="operateAction('detail', row)" size='medium'>详情</el-button>
              <!-- <el-button type="text" @click="operateAction('addIncomes', row)" size='medium'>充值积分</el-button>
              <el-button type="text" @click="operateAction('subIncomes', row)" size='medium'>扣除积分</el-button> -->
              <el-dropdown style="margin-left:16px" :show-timeout='10' @command="handleDropdown">
                  <span class="el-dropdown-link">
                    <el-button type="text" size='medium'>更多</el-button>
                    <i class="el-icon-arrow-down"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <!-- <el-dropdown-item :command="['addBalance',row]">充值余额</el-dropdown-item>
                    <el-dropdown-item :command="['subBalance',row]">扣除余额</el-dropdown-item> -->
                    <el-dropdown-item :command="['addIncomes',row]">充值购物积分</el-dropdown-item>
                    <el-dropdown-item :command="['subIncomes',row]">扣除购物积分</el-dropdown-item>
                    <el-dropdown-item :command="['addIncomesOriginal',row]">充值原积分</el-dropdown-item>
                    <el-dropdown-item :command="['updataParent',row]">修改推荐人</el-dropdown-item>
                  </el-dropdown-menu>
                  
                </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
        <pagination style="background: #ffffff; height: 50px" v-show="totalSize > 0" :total="totalSize"
          :page.sync="page" :limit.sync="size" @pagination="getDataList" />
      </el-col>
    </el-row>
    <updateForIncomes ref="updateForIncomes" @confirm='getDataList'></updateForIncomes>
    <updateUserView ref="updateUser" @confirm='getDataList'></updateUserView>
  </div>
</template>

<script>
import { formData } from './data'
import { findUserList, deleteUsers } from '@/api/system/user.js'
import { findRankList } from '@/api/system/rank.js'
import { findTeamList } from '@/api/system/team.js'
import { findIdentityList } from '@/api/system/identity.js'
import updateForIncomes from './components/updateForIncomes.vue'
import updateUserView from './components/updateUserView.vue'
export default {
  components: { updateForIncomes, updateUserView },
  data() {
    return {
      page: 1,
      size: 10,
      totalSize: 0,
      dataList: [],
      searchParams: {},
      multipleSelection: [],
      formData
      
    }
  },
  created() {
    if (this.$route.query.currentSearchParams) {
      this.searchParams = JSON.parse((decodeURIComponent(this.$route.query.currentSearchParams)))
      this.page = this.searchParams.page
    }
    this.getDataList()
    this.findRankList()
    this.findTeamList()
    this.findIdentityList()
  },
  methods: {
    handleSearch() {
      this.page = 1
      this.getDataList()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    operateAction(scene, row) {
      switch (scene) {
        case 'create':
          this.$router.push({name: 'Update', query: {formData: encodeURIComponent(JSON.stringify(this.formData)), currentRouteName: this.$route.name }})
          break;
        case 'update':
          this.$router.push({name: 'Update', query: {rowId: row.id, formData: encodeURIComponent(JSON.stringify(this.formData)), currentRouteName: this.$route.name, currentSearchParams: encodeURIComponent(JSON.stringify(this.searchParams)) }})
          break;
        case 'detail':
          this.$router.push({name: 'detailForUser', query: {rowId: row.id, currentRouteName: this.$route.name, currentSearchParams: encodeURIComponent(JSON.stringify(this.searchParams)) }})
          break;
        case 'delete':
          if (this.multipleSelection.length <= 0) {
            this.$message({
              message: '请选择操作行',
              type: 'info'
            })
          } else {
            var rowIds = this.multipleSelection.map(function (item) {
              return item.id
            })
            var _this = this
            this.$confirm('是否确认删除选中的' + rowIds.length + '条记录?', "警告", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(function () {
              return deleteUsers({
                obj_ids: rowIds
              }).then(res => {
                if (res.data.code == 10000) {
                  _this.getDataList()
                  _this.$message({
                    message: '操作成功',
                    type: 'success'
                  })
                }
              })
            })
          }
          break;
        default:
          break;
      }
    },
    handleDropdown(e){
      var key = e[0]
      var row = e[1]
      switch (key) {
        case 'addIncomes':
          this.$refs.updateForIncomes.show({rowId: row.id, title: '充值购物积分', 'key': 'addIncomes', 'currentMoney': row.incomes})
          break;
        case 'subIncomes':
          this.$refs.updateForIncomes.show({rowId: row.id, title: '扣除购物积分', 'key': 'subIncomes', 'currentMoney': row.incomes})
          break;
        case 'addBalance':
          this.$refs.updateForIncomes.show({rowId: row.id, title: '充值余额', 'key': 'addBalance', 'currentMoney': row.balance})
          break;
        case 'subBalance':
          this.$refs.updateForIncomes.show({rowId: row.id, title: '扣除余额', 'key': 'subBalance', 'currentMoney': row.balance})
          break;
        case 'addIncomesOriginal':
          this.$refs.updateForIncomes.show({rowId: row.id, title: '充值原积分', 'key': 'addIncomesOriginal', 'currentMoney': row.incomesOriginal})
          break;
        case 'addIncomesReduction':
          this.$refs.updateForIncomes.show({rowId: row.id, title: '充值立减积分', 'key': 'addIncomesReduction', 'currentMoney': row.incomesReduction})
          break;
        case 'updataParent':
          this.$refs.updateUser.show({rowId: row.id, title: '修改推荐人', 'key': 'updataParent',})
          break;
        default:
          break;
      }
    },
    //数据请求-----------------------------------------------
    // 获取列表数据
    getDataList() {
      this.searchParams.page = this.page
      this.searchParams.size = this.size
      findUserList(this.searchParams).then(res => {
        if (res.data.code == 10000) {
          this.totalSize = res.data.data.total_count
          this.dataList = res.data.data.list
        }
      });
    },
    findRankList() {
      findRankList().then(res => {
        if (res.data.code == 10000) {
          var _list = res.data.data.list
          this.formData.options.rank = _list
        }
      });
    },
    findTeamList() {
      findTeamList().then(res => {
        if (res.data.code == 10000) {
          var _list = res.data.data.list
          this.formData.options.team = _list
        }
      });
    },
    findIdentityList() {
      findIdentityList().then(res => {
        if (res.data.code == 10000) {
          var _list = res.data.data.list
          this.formData.options.identity = _list
        }
      });
    },
  },
}
</script>


<style lang="scss" scoped></style>
